<template>
  <view class="wrapper row">
    <view class="search row flex-center pd_l_30 pd_r_30" style="justify-content: space-between;">
      <u-input v-model="value" class="flex-1 fon4-24 pd_l_30 pd_r_30" :height="50"
               :clearable="false"
               confirm-type="search"
               @confirm="search"
               placeholder="请输入职业名称进行搜索"/>
      <view class="btn color-active" @click="search">搜索</view>
    </view>
    <scroll-view scroll-y class="flex-1 row main" style="height: 100%;">
      <view class="u-flex u-flex-wrap u-p-t-30 u-p-b-30">
        <navigator url="/pages/explore/job_path?n=制造业" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/1.png" />
          <view class="txt u-font-md color-BD0A85">制造业</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=交通、运输和物流" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/2.png" />
          <view class="txt u-font-md color-BD0A85">交通、运输和物流</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=建筑及建造" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/3.png" />
          <view class="txt u-font-md color-BD0A85">建筑及建造</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=科学，技术，工程和数学" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/4.png" />
          <view class="txt u-font-md color-BD0A85">科学，技术，工程和数学</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=市场营销" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/5.png" />
          <view class="txt u-font-md  color-39C4C4">市场营销</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=金融" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/6.png" />
          <view class="txt u-font-md color-39C4C4">金融</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=商业、管理及行政" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/7.png" />
          <view class="txt u-font-md color-39C4C4">商业、管理及行政</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=旅游业" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/8.png" />
          <view class="txt u-font-md color-39C4C4">旅游业</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=人类服务" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/9.png" />
          <view class="txt u-font-md color-8840C6">人类服务</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=法律，公共安全及保障" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/10.png" />
          <view class="txt u-font-md color-8840C6">法律，公共安全及保障</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=政府和公共管理" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/11.png" />
          <view class="txt u-font-md color-8840C6">政府和公共管理</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=教学和培训" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/12.png" />
          <view class="txt u-font-md color-8840C6">教学和培训</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=艺术、传媒与信息传播" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/13.png" />
          <view class="txt u-font-md color-F8A50A">艺术、传媒与信息传播</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=信息技术" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/14.png" />
          <view class="txt u-font-md color-F8A50A">信息技术</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=健康科学" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/15.png" />
          <view class="txt u-font-md color-DB333E">健康科学</view>
        </navigator>
        <navigator url="/pages/explore/job_path?n=农业、食品业及自然资源" class="item_job row-column flex-center">
          <image class="icon row flex-center font-b" src="../../static/job_icon/16.png" />
          <view class="txt u-font-md color-07BF18">农业、食品业及自然资源</view>
        </navigator>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import {request} from "../../util/api";

  export default {
    name: "",

    created() {
      this.getList()
    },

    data() {
      return {
        list: []
      }
    },

    methods:{
      getList() {
        request({
          url: '/system/wx/CompassJobInfo/getJobRealmList',
          token: true
        }).then(res => {
          this.list = res.data
        })
      },
      search() {
        this.$u.route({
          url: '/pages/explore/job_path?s=true&k=' + this.value
        })
      }
    },
    onShareAppMessage(res) {

    }
  }
</script>

<style scoped lang="scss">
  .wrapper {
    flex-direction: column;
    height: 100%;
    .search {
      width: 100%;
      background: rgba(249, 249, 249, 100);
      padding-top: 20upx;
      padding-bottom: 20upx;
      .flex-1 {
        background: #fff;
        border-radius: 25upx;
        margin-right: 20upx;
      }
    }
    .main {
      width: 98%;
      margin: 0 auto;
      .item_job {
        width: 33.33%;
        margin: 10upx 0;
      }
      .icon {
        width: 120upx;
        height: 120upx;
        font-size: 45upx;
        border-radius: 16upx;
        color: #fff;
      }
      .color-BD0A85 {
        color: #BD0A85;
      }
      .color-39C4C4 {
        color: #39C4C4;
      }
      .color-8840C6 {
        color: #8840C6
      }
      .color-F8A50A {
        color: #F8A50A;
      }
      .color-DB333E{
        color: #DB333E
      }
      .color-07BF18 {
        color: #07BF18;
      }
      .txt {
        width: 70%;
        text-align: center;
        height: 70upx;
      }
    }
  }
</style>
